<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>登录 | Bruce个人博客</title>
    <!-- Bootstrap core CSS -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link rel="stylesheet" href="/Blog/css/public.css" />
    <link rel="stylesheet" href="/Blog/css/login.css" />
</head>
<body>
<div class="container">
    <form action="/Blog/UsersServlet.do?action=login" method="post">
        <h1>
            <a href="/Blog/IndexServlet.do">Bruce个人博客</a>
        </h1>
        <br/>
        <label for="input" class="sr-only">用户名</label>
        <input
                type="text"
                id="input"
                class="form-control"
                placeholder="请输入用户名"
                name="username"
                required>

        <label
                for="inputPassword"
                class="sr-only">密码</label>

        <input
                type="password"
                id="inputPassword"
                class="form-control"
                placeholder="请输入密码"
                name="password"
                required>

        <br/>
        <label for="code" class="sr-only">验证码</label>

        <!--验证码框-->
        <input type="text" id="code" name="code"  class="form-control" required placeholder="请输入验证码"/>

        <br/>

        <img src="/Blog/CodeServlet.do" id="codeImg"/> <a href="javascript:changeImage();">看不清</a>
        <script type="text/javascript">
            //看不清换一张验证码
            function changeImage() {
                //防止浏览器有缓存，每次请求一个新的地址，后面接一个随机数~
                document.getElementById("codeImg").src="/Blog/CodeServlet.do?time="+new Date();
            }
        </script>


        <!--JSP中获取request中的参数msg-->
        <span style="color: red">${requestScope.msg}</span>
        <button
                class="btn btn-lg btn-primary btn-block"
                type="submit"
                id="submit">登录</button>

        <a
                class="visitor"
                href="/Blog/IndexServlet.do">访客登录</a>
    </form>
</div>
<div id="footer">
    <a target="_blank"
       href="https://github.com/Lemonreds">
        <img src="/Blog/img/github.png"
             width="22px"
             height="22px" class="img-circle">GitHub</a>
</div>
<!-- footer -->
</body>
</html>